<script>
Vue.component('apijson-viewedit', {
    delimiters: ['{', '}'],
    props: [
        "model_name",
        "request_tag",
        "id",
        "config",
        "hook_init",
        "hook_ajax_params"
    ],
    template: `<div>
<Spin size="large" fix v-if="loading"></Spin>
<i-form @submit.native.prevent :label-width="80">
    <form-item v-for="item in viewedit_items" :key="item.key" :label="item.title">
        <i-input v-if="item.component=='input'" v-model="item.value" :readonly="!editable(item)"></i-input>
        <checkbox v-if="item.component=='checkbox'" v-model="item.value" :disabled="!editable(item)"></checkbox>
        <i-input v-if="item.component=='textarea'" v-model="item.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></i-input>
        {{block custom_viewedit_component}}{{end custom_viewedit_component}}
    </form-item>
    <form-item v-if="config_editable" label="Action">
        <i-button type="info" icon="ios-download" size="large" @click="save">Save</i-button>
    </form-item>
</i-form>
</div>`,
    data: function(){
        return {
            l_request_tag: null,
            role: "{{=role or ''}}",
            loading: false,
            row: {},
            row_saved: {},
            viewedit_items: [],

            config_editable: false,
            config_viewedit_fields: null,
        }
    },
    methods: {
        init_viewedit: function(){
            this.loading = true
            var params = {}
            var model_params = {
                "id":this.id
            }
            if (this.role!='') {
                model_params["@role"] = this.role
            }
            params[this.model_name] = model_params
            var thisp = this
            $.ajax({
                type: "POST",
                url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.get')}}",
                contentType: 'application/json',
                data: JSON.stringify(params),
                success: function (data) {
                    thisp.loading = false
                    if (data.code==200) {
                        thisp.row = data[thisp.model_name]
                        thisp.row_saved = thisp.row
                        thisp.viewedit_items = []
                        if (thisp.config_viewedit_fields!=null) {
                            for (var i in thisp.config_viewedit_fields) {
                                var d = thisp.config_viewedit_fields[i]
                                d.value = thisp.row[d.key]
                                d.component = d.component || "input"
                                thisp.viewedit_items.push(d)
                            }
                        }
                    }
                    else {
                        thisp.$Notice.error({
                            title: 'error when get table '+thisp.table_name,
                            desc: data.msg
                        })
                    }
                }
            })
        },
        editable: function(item){
            var editable = true
            if (item.editable!=null) {editable=item.editable}
            return this.config_editable && editable && (item.key!="id")
        },
        save: function(){
            var params = {
                "@tag": this.l_request_tag
            }
            var record_params = {}
            //only save modified fields
            for (var k in this.viewedit_items) {
                var d = this.viewedit_items[k]
                if (d.key=="id"|| d.value!=this.row_saved[d.key]) {
                    record_params[d.key] = d.value
                    this.row[d.key] = d.value
                }
            }
            if (this.role!='') {
                record_params["@role"] = this.role
            }
            params[this.l_request_tag] = record_params
            params = this.ajax_hook("apijson_put","update",params)
            var thisp = this
            $.ajax({
                type: "POST",
                url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.put')}}",
                contentType: 'application/json',
                data: JSON.stringify(params),
                success: function (data) {
                    if (data.code==200){
                        thisp.row_saved = thisp.row
                        thisp.$Notice.success({
                            title: 'success update #'+thisp.row.id+' in table '+thisp.model_name,
                            desc: data.msg
                        })
                    }
                    else {
                        thisp.$Notice.error({
                            title: 'error when update #'+thisp.row.id+' in table '+thisp.model_name,
                            desc: data.msg
                        })
                    }
                }
            })
        },
        ajax_hook: function(method,action,params) {
            if (this.hook_ajax_params!=null) {
                var after_hook = this.hook_ajax_params(method,action,params)
                if (after_hook!=null) {
                    params = after_hook
                }
                else {
                    console.log("warning: hook_ajax_params('"+method+"','"+action+"',params) return null, so ignore this hook")
                }
            }
            return params
        }
    },
    mounted: function(){
        if (this.request_tag==null) {
            this.l_request_tag = this.model_name
        }
        else {
            this.l_request_tag = this.request_tag
        }
        //if not do this, the first notice will hide behind the navigation bar in uliweb apps
        this.$Notice.config({top: 100,duration: 8});
        if (this.hook_init!=null) {
            this.hook_init(this)
        }
        if (this.config!=null){
            this.config_editable = this.config.editable || false
            this.config_viewedit_fields = this.config.viewedit_fields || null
        }
        this.init_viewedit()
    }
})
</script>
